<template>
  <div class="clearfix padding10" v-bind:class="{'bg-select': isAnswer}">
    <div class="pull-left width618">
      <div>
        <label>{{questionData.quName}}</label>
      </div>
      <div>
        <label>描述: </label>
        <span>{{questionData.quNote}}</span>
      </div>
      <div>
        <div class="clearfix" v-for="(item, key) in questionData.quRadios">
          <div>
            选项{{key + 1}}: 
            <label>
              <input type="radio"
              :name="'question' + questionData.id"
              v-model="questionData.answerId"
              :value="item.id"
              :data-answerId="questionData.answerId"
              v-on:click="answerQuestion(questionIndex, questionData, item)"/>
              <span>{{item.optionName}}</span>
            </label>
          </div>
        </div>
        <div v-if="otherOptions.length > 0">
          <div><label>问题补充：</label></div>
          <div v-for="(other, otherIndex) in otherOptions">
            <div>
              {{ other.question }}
            </div>
            <div v-if="other.inputType === 'text'">
              <input type="text" v-model="other.answerValue"  v-on:change="answerQuestionOther(otherIndex)" />
            </div>
            <div v-if="other.inputType === 'textarea'">
              <textarea v-model="other.answerValue" v-on:change="answerQuestionOther(otherIndex)"></textarea>
            </div>
            <div v-else-if="other.inputType === 'radio'">
              <div v-for="otherSon in other.answer">
                <label>
                  <input type="radio"
                  :value="otherSon"
                  v-model="other.answerValue"
                  v-on:click="answerQuestionOther(otherIndex)"/>
                  <span>{{ otherSon }}</span>
                </label>
              </div>
            </div>
            <div v-else-if="other.inputType === 'checkbox'">
              <el-checkbox-group v-model="other.answerValue" @change="answerQuestionOther(otherIndex)">
                <el-checkbox v-for="otherSon in other.answer" :label="otherSon" :key="otherSon"></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pull-right width382 textCenter">
      <span>
        <img id="previewImg" v-if="questionData.file" :src="questionData.file" style="width:100%;" class="img-thumbnail"/>
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'answerQuestion',
  data () {
    return {
      questionData: [],
      isAnswer: false,
      otherOptions: []
    }
  },
  props: {
    questionIndex: {
      type: Number,
      default: null
    },
    question: {
      type: Object,
      default: {}
    }
  },
  components: {
  },
  methods: {
    // 初始化数据
    initData (question) {
      this.isAnswer = (question.answerId ? true : false)
      this.questionData = question
      // 初始化附加问答
      if (question.otherOptions && question.otherOptions.length > 0 && typeof(question.otherOptions) === 'string') { 
        this.otherOptions = JSON.parse(question.otherOptions)
      }
      else if (question.otherOptions && question.otherOptions.length > 0) {
        this.otherOptions = question.otherOptions
        for (let index in this.otherOptions) {
          if (this.otherOptions[index].inputType === 'checkbox' && !this.otherOptions[index].answerValue) {
            this.otherOptions[index].answerValue = []
          }
          else if (!this.otherOptions[index].answerValue) {
            this.otherOptions[index].answerValue = ''
          }
        }
      } else if (!question.otherOptions || question.otherOptions.length === 0) {
        this.otherOptions = []
      }
    },
    answerQuestion (index, questionData, item) {
      this.isAnswer = true
      this.$emit('answerQuestion', index, questionData, item)
    },
    answerQuestionOther (index) {
      this.$emit('answerQuestionOther', this.questionIndex, this.otherOptions)
    }
  },
  watch: {
    // 监听参数变化
    question: {
      handler: function(val) {
        this.initData(val)
      },
      // 深度观察
      deep: true
    }
  },
  beforeCreate () {},
  created () {
    this.initData(this.question)
  },
  beforeMount () {},
  mounted () {},
  beforeUpdate () {},
  updated () {},
  beforeDestroy () {},
  destroyed () {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bg-select{background: #ecf0f5;}
</style>
